<script lang="js" setup>
import createWebSocket from '@/utils/websocket/index'
import {onMounted, ref} from 'vue'

const props = defineProps({
  nsp: {
    type: String,
  },
  boxId: {
    type: [String, Number],
  },
})

let socket
onMounted(() => {
  create()
})

function create() {
  socket = createWebSocket(props.nsp)
  socket.on('s2c', (data) => {
    console.log('收到消息', data)
  })
}

const message = ref('')

function sendToServer() {
  socket.emit('c2s', {
    type: 'group',
    from: props.boxId,
    message: message.value,
  })
}

</script>
<template>
  <main class="socket-box-test">
    <el-input v-model="message"></el-input>
    <el-button @click="sendToServer">发送消息</el-button>
  </main>
</template>
<style lang="less">
.socket-box-test {
  border: 1px solid #222222;
  margin: 10px;
  padding: 10px;
}
</style>
